.lg{
    font-size:80px;

}
.de{
    font-size:60px;
}

.sm{
    font-size:30px;
}
.mini{
    font-size:15px;
}


.lg:focus{
    box-shadow:0 0 10px red;
    background-color:black;
}
.de:focus{
    box-shadow:0 0 10px blue;
    background-color:black;
}

.sm:focus{
    box-shadow:0 0 10px black;
    background-color:red;
}
.mini:focus{
    box-shadow:0 0 10px yellow;
    background-color:black;
}
















.white{
    background-color:white;
    margin-left:10px;
    margin-right:20px;
    border:1px solid;
    border-radius:4px;
    outline:none;
    cursor:pointer;
    box-shadow:0 1px #054017;
}

.black{
    background-color:black;
    margin-left:10px;
    margin-right:20px;
    font-size:30px;
    border:1px solid;
    border-radius:4px;
    outline:none;
    cursor:pointer;
    box-shadow:0 2px #054017;
}

.red{
    background-color:red;
    margin-left:10px;
    margin-right:20px;
    font-size:60px;
    border:1px solid;
    border-radius:4px;
    outline:none;
    cursor:pointer;
    box-shadow:0 3px #054017;
}

.blue{
    background-color:blue;
    margin-left:10px;
    margin-right:20px;
    font-size:80px;
    border:1px solid;
    border-radius:4px;
    outline:none;
    cursor:pointer;
    box-shadow:0 4px #054017;
}

.white:hover{
    background-color:yellow;
}
.white:active{
    color:black;
    background-color:pink;
    transform: translateY(4px);
    text-shadow:0 1px #f4f4f4;
}
.black{
    color:white;
}

.black:hover{
    background-color:yellow;
}
.black:active{
    color:white;
    background-color:pink;
    transform: translateY(4px);
    text-shadow:0 1px #f4f4f4;
}


.red:hover{
    background-color:yellow;
}
.red:active{
    color:black;
    background-color:pink;
    transform: translateY(4px);
    text-shadow:0 1px #f4f4f4;
}


.blue:hover{
    background-color:yellow;
}
.blue:active{
    color:black;
    background-color:yellow;
    transform: translateY(4px);
    text-shadow:0 1px #f4f4f4;
}

.alive{
    -webkit-transition: all 5s ease;
    transition:all 0.1s;

}